<template>
  <div class="home-nav">
    <el-scrollbar class="heightp100">
    <el-menu v-for="(item,index) in leftMenuTrees" :key="index"  default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64"
      text-color="rgb(191, 203, 217)"  active-text-color="#1890ff">
      <el-submenu :index="'fo-'+(index+1).toString()" class="el-menu-first">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.name}}</span>
        </template>
        <el-menu-item-group  v-for="(items,indexitem) in item.children" :key="indexitem">
          <el-menu-item @click="leftMenuNav" :index="'falun-'+indexitem.toString()" :data_url="items.url" :data_id="items.parentId">{{items.name}}</el-menu-item>
        </el-menu-item-group>
     </el-submenu>
    </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
  export default {
    name: 'home-nav',
    props:['leftMenuTrees'],
    data: function() {
      return {
        msg: 'Welcome to Your Vue.js App 钟海',
        homeNav:false,
        defaultIndex:'0'
      }
    },
    created: function() {
      //返回实时交易额/


    },
    mounted: function() {

    },
    methods: {
      addDelStatus: function(index) {
        this.curId = index
      },
      handleOpen:function(){

      },
      handleClose:function () {



      },
      leftMenuNav:function(e){
        this.$emit('leftMenuNav',e);
      }
    }

  }
</script>

<style scoped>
  .home-nav {
    width: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(84, 92, 100)
  }
  .el-scrollbar__wrap {
   overflow-x: hidden;
  }
  .el-menu-first,.el-menu{
    border-right: none;
  }
</style>
